﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<style type="text/css">
    .topPanel .search .input-group .form-control {
        padding: 4px 5px !important;
        height: 22px !important;
        margin: 0 10px !important;
        width: 80%;
    }
    .selectbox {
        color: #444;
        line-height: 30px;
        display: block;
        padding-left: 8px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;        
        margin:5px;
        height:30px;
        width:150px;
    }
    
    .search table td {
        height: 30px;
        line-height: 30px;
    }

    .zdyPanel {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        margin: 0px;
        float: left;
        width: 100%;
    }

    .zdyTool {
        float: left;
        padding-left: 10px;
        width: 100%;
    }

    .zdyBar {
        height: 50px;
        line-height: 50px;
        padding: 0px;
        width: 100px;
        margin: 0px;
    }

    .zdyUL {
        list-style-type: none;
        margin: 5px 0px 0px -3px;
        padding: 0px;
    }

        .zdyUL li {
            float: left;
            list-style: none;
            height: 24px;
            line-height: 22px;
        }

            .zdyUL li a {
                cursor: pointer;
                padding: 5px 10px;
                border-radius: 4px;
            }

            .zdyUL li i {
                margin-right: 4px;
                font-size: 13px;
                color: #666;
                vertical-align: middle;
                margin-top: -1px;
            }

            .zdyUL li a:hover {
                text-decoration: none;
                background-color: #1ABC9C;
                color: #fff;
            }

    .zdyGirdPanel {
        width: 100%;
        margin: 0px;
        padding: 0px;
        float: left;
    }

    .zdyContentPanel {
        width: 100%;
        margin: 5px 0px 0px 0px;
        padding: 0px;
        float: left;
    }

    .zdyFont {
        padding-left: 5px;
        color: #ff6a00;
    }
</style>
<script>
    var resultData;
    var selectPage = -1;
    var init = -1;
    $(function () {        
        getItemList();
        gridList();
        InitSelectControl();
    });

    function getItemList() {
        $.ajax({
            url: "/MyTask/CustomerManger/GetItemListJson",
            dataType: "json",
            async: false,
            success: function (data) {
                resultData = data;
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    function InitSelectControl() {
        var khdjs = resultData.khdjs;
        for (var i = 0; i < khdjs.length; i++) {
            $("#F_ClientLevel").append("<option value='" + khdjs[i].F_ItemCode + "'>" + khdjs[i].F_ItemName + "</option>");
        }
        //$("#F_ClientLevel").bindSelect({
        //    placeholder: ''
        //});
        var khlxs = resultData.khlxs;
        for (var i = 0; i < khlxs.length; i++) {
            $("#F_ClientType").append("<option value='" + khlxs[i].F_ItemCode + "'>" + khlxs[i].F_ItemName + "</option>");
        }
        //$("#F_ClientType").bindSelect({
        //    placeholder:''
        //});
        $("#F_UserId").bindSelect({
            url: "/MyTask/CustomerManger/GetUsersJson",
            search: true,
            id: "F_Id",
            text: "F_RealName",
            placeholder: '请选择销售人员'
        });        
    }

    function btnSearch() {
        var $gridList = $("#gridList");       
        var queryJson = {
            UserId: $("#F_UserId").val(),
            F_ClientLevel: $("#F_ClientLevel").val(),
            F_ClientType: $("#F_ClientType").val()
        };
        $gridList.jqGrid('setGridParam', {
            postData: { queryJson: JSON.stringify(queryJson) },
        }).trigger('reloadGrid');
        selectPage = -1;
        init = 0;        
    }

    function gridList() {
        var $gridList = $("#gridList");
        var queryJson = {
            UserId: $("#F_UserId").val(),
            F_ClientLevel: $("#F_ClientLevel").val(),
            F_ClientType: $("#F_ClientType").val()
        };
        $gridList.dataGrid({
            url: "/MyTask/CustomerManger/GetGridDataJson",
            postData: { queryJson: JSON.stringify(queryJson) },
            height: 310,
            colModel: [
                { label: '客户名称', name: 'F_ClientName', width: 200, align: 'left' },
                {
                    label: '所在城市', name: 'F_CityId', width: 150, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        for (var i = 0; i < resultData.citys.length; i++) {
                            if (resultData.citys[i]["F_ItemCode"] == rowObject["F_CityId"]) {
                                return resultData.citys[i]["F_ItemName"];
                            } else {
                                return '';
                            }
                        }
                    }
                },
                {
                    label: '客户级别', name: 'F_ClientLevel', width: 150, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        for (var i = 0; i < resultData.khdjs.length; i++) {
                            if (resultData.khdjs[i]["F_ItemCode"] == rowObject["F_ClientLevel"]) {
                                return resultData.khdjs[i]["F_ItemName"];
                            } else {
                                return '';
                            }
                        }
                    }
                },
                {
                    label: '客户类型', name: 'F_ClientType', width: 80, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        for (var i = 0; i < resultData.khlxs.length; i++) {
                            if (resultData.khlxs[i]["F_ItemCode"] == rowObject["F_ClientType"]) {
                                return resultData.khlxs[i]["F_ItemName"];
                            } else {
                                return '';
                            }
                        }
                    }
                },
                { label: '跟进销售', name: 'F_CreatorUserId', width: 160, align: 'left' },
                { label: '更新时间', name: 'F_LastModifyTime', width: 160, align: 'left' },
                { label: '', name: 'F_Id', hidden: true },                
            ],
            pager: "#gridPager",
            rowNum: 10,
            rowList: [10, 20, 30],
            viewrecords: true,
            ondblClickRow: function (rowid, iRow, iCol, e) {
                selectPage = rowid;
                gridindustryRecordReload();                
            },
            loadComplete: function (data) {
                if (init == -1) {
                    gridindustryRecord(0);
                } else {
                    if (data.rows.length > 0) {
                        gridindustryRecordReload(data.rows[0].F_Id);
                    } else {
                        gridindustryRecordReload(0);
                    }
                    
                }                                
            }
        });
    }

    function gridindustryRecord(pagerindex) {
        var $gridList = $("#gridindustryRecord");
        var rowobj = $("#gridList").jqGridRowValue()[pagerindex];
        var queryJson = {
            F_FarthId: rowobj == undefined ? "" : rowobj["F_Id"]
        };
        $gridList.dataGrid({
            url: "/MyTask/CustomerManger/GetIndustryRecord",
            postData: { queryJson: JSON.stringify(queryJson) },
            height: 315,
            colModel: [
                { label: '客户名称', name: 'F_ClientName', width: 200, align: 'left' },
                {
                    label: '所属行业', name: 'F_IndustryId', width: 100, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        var isok = false;
                        for (var i = 0; i < resultData.sshys.length; i++) {
                            if (resultData.sshys[i].F_Id == rowObject["F_IndustryId"]) {
                                isok = true;
                                return resultData.sshys[i]["F_ItemName"];
                            }
                        }
                        if (!isok) {
                            return '';
                        }
                    }
                },
                { label: '品牌项目组', name: 'F_ProjectName', width: 200, align: 'left' },
                {
                    label: '活动类型', name: 'F_ActivityType', width: 100, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        var isok = false;
                        for (var i = 0; i < resultData.ActivityType.length; i++) {
                            if (resultData.ActivityType[i].F_Id == rowObject["F_ActivityType"]) {
                                isok = true;
                                return resultData.ActivityType[i]["F_ItemName"];
                            }
                        }
                        if (!isok) {
                            return '';
                        }
                    }
                },
                {
                    label: '场地类型', name: 'F_SiteType', width: 100, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        var isok = false;
                        for (var i = 0; i < resultData.SiteType.length; i++) {
                            if (resultData.SiteType[i].F_Id == rowObject["F_SiteType"]) {
                                isok = true;
                                return resultData.SiteType[i]["F_ItemName"];
                            }
                        }
                        if (!isok) {
                            return '';
                        }
                    }
                },
                { label: '预算', name: 'F_ActivityBudget', width: 120, align: 'left' },
                { label: '联系人', name: 'F_Contract', width: 100, align: 'left' },
                {
                    label: '所属部门', name: 'F_Department', width: 100, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        var isok = false;
                        for (var i = 0; i < resultData.ssbms.length; i++) {
                            if (resultData.ssbms[i].F_Id == rowObject["F_Department"]) {
                                isok = true;
                                return resultData.ssbms[i]["F_ItemName"];
                            }
                        }
                        if (!isok) {
                            return '';
                        }
                    }
                },
                {
                    label: '职位', name: 'F_PositionId', width: 100, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        var isok = false;
                        for (var i = 0; i < resultData.gszws.length; i++) {
                            if (resultData.gszws[i].F_Id == rowObject["F_PositionId"]) {
                                isok = true;
                                return resultData.gszws[i]["F_ItemName"];
                            }
                        }
                        if (!isok) {
                            return '';
                        }
                    }
                },
                { label: '联系电话', name: 'F_Phone', width: 100, align: 'left' },
                { label: '邮箱', name: 'F_Mail', width: 150, align: 'left' },
                { label: '更新时间', name: 'F_LastModifyTime', width: 120, align: 'left' },
                { label: '', name: 'F_Id', hidden: true },                
            ],
            ondblClickRow: function (rowid, iRow, iCol, e) {
                childPage = rowid;
            },
            pager: "#gridPagerindustry",
            rowNum: 10,
            rowList: [10],
            viewrecords: true
        });
    }

    function gridindustryRecordReload(F_Id) {
        var $gridList = $("#gridindustryRecord");       
        var queryJson = {
            F_FarthId: F_Id
        };
        $gridList.jqGrid('setGridParam', {
            postData: { queryJson: JSON.stringify(queryJson) },
        }).trigger('reloadGrid');
    }
</script>
<div class="zdyContentPanel" style="height:25px;line-height:25px;background-color:#eee;border:1px solid #ddd;margin-bottom:2px;">
    <span class="zdyFont">操作说明：上下表格行数据联动，请双击！</span>
</div>
<div class="zdyPanel">
    <div class="zdyTool">
        <div class="zdyBar" style="float:left;white-space:nowrap;width:800px;margin-top:0px;">
            <div class="search">
                <table class="form" style="width:800px;">
                    <tr>
                        <td class="formValue">
                            <select id="F_UserId" name="F_UserId" class="selectbox">
                                <option value="">==请选择销售人员==</option>
                            </select>
                        </td>
                        <td class="formValue">
                            <select id="F_ClientLevel" name="F_ClientLevel" class="selectbox">
                                <option value="">==请选择客户级别==</option>
                            </select>
                        </td>
                        <td class="formValue">
                            <select id="F_ClientType" name="F_ClientType" class="selectbox">
                                <option value="">==请选择客户类型==</option>
                            </select>
                        </td>
                        <td>
                            <div class="input-group">
                                <button id="btn_search" onclick="btnSearch()" type="button" class="btn  btn-primary" style="padding:5px 20px">按条件筛选</button>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="zdyBar" style="float:right;white-space:nowrap;width:80px;">
            <div class="btn-group">
                <a class="btn btn-primary" onclick="$.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
            </div>            
        </div>
    </div>
</div>
<div class="zdyGirdPanel">
    <table id="gridList"></table>
    <div id="gridPager"></div>
</div>
<div class="zdyContentPanel">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#industryRecord" data-toggle="tab">行业(品牌方)项目组</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="visitRecord">          
            <div class="zdyGirdPanel">
                <table id="gridindustryRecord"></table>
                <div id="gridPagerindustry"></div>
            </div>
        </div>
    </div>
</div>